import { useEffect } from 'react'
import useStore from './store' // zustand store

function Zustand() {
	// 这里使用useStore()获取到zustand store中的数据
	const { count, inc, channeList, fetchGetList } = useStore()

	useEffect(() => {
		fetchGetList()
	}, [fetchGetList])

	return (
		<>
			<h2>Zustand</h2>
			<hr />
			<p>当前计数：{count}</p>
			<button onClick={inc}>点击增加</button>
			<hr />
			<h4>获取频道列表</h4>
			<ul>
				{channeList.map((item) => (
					<li key={item.id}>{item.name}</li>
				))}
			</ul>
		</>
	)
}

export default Zustand
